<template>
  <div class="report-channel">
    <div class="channeg-header">
      <div class="title">请选择渠道</div>
      <p class="tips">一旦选择 7天内不能再次更换</p>
    </div>
    <ul class="channel-list">
      <li class="scale-1px-bottom" @click="chooseChannel(item)" v-for="item in channelList" :key="item.channelId">{{item.channelName}}</li>
    </ul>
  </div>
</template>

<script>
import reportService from 'SERVICE/reportService'
export default {
  name: 'reportChannel',
  data() {
    return {
      channelList: []
    }
  },
  created() {
    this.getChannelListByLinkerId()
  },
  methods: {
    // 获取渠道列表
    async getChannelListByLinkerId() {
      const response = await reportService.getChannelListByLinkerId({ linkerId: this.$route.query.linkerId })
      this.channelList = response
    },
    // 选择渠道事件
    chooseChannel(item) {
      this.$store.commit('REPORT_INFO', {
        channel: `${item.channelName}${item.freeFlag ? '(免费券)' : ''}`,
        currentChannel: item
      })
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.report-channel {
  padding: 0 16px;
  .channeg-header {
    height: 84px;
    box-sizing: border-box;
    padding-top: 26px;
    .title {
      height: 32px;
      line-height: 32px;
      font-size: 20px;
      font-weight: 600;
      color: rgba(19, 40, 77, 1);
    }
    .tips {
      font-size: 12px;
      color: #ea4d2e;
      font-weight: 400;
    }
  }
  .channel-list {
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    color: rgba(19, 40, 77, 1);
  }
}
</style>